<template>
  <div>
    <div style="display: flex;justify-content: space-around;">
      <el-row>
        <el-col>
          <div class="grid-content bg-purple-dark">
            <el-table
                :data="tableData"
                highlight-current-row
                style="width: 100%"
                @current-change="handleCurrentChange">
              <el-table-column
                  label="商品名称"
                  prop="productBean.productName"
                  width="200">
              </el-table-column>
              <el-table-column
                  label="厂家"
                  prop="productBean.factory"
                  width="200">
              </el-table-column>
              <el-table-column
                  label="现有库存"
                  prop="productBean.productNum"
                  width="200">
              </el-table-column>
              <el-table-column
                  label="采购金额"
                  prop="productBean.salePrice"
                  width="200">
              </el-table-column>
              <el-table-column
                  label="出库数量"
                  prop="checkNum"
                  width="200">
              </el-table-column>
            </el-table>
          </div>
        </el-col>
      </el-row>
    </div>

    <div style="display: flex;justify-content: center">
      <el-row style="margin-top: 50px">
        <el-tooltip class="item" content="请选中商品,然后修改数量" effect="dark" placement="top">
          <el-input v-model="upPurchaseNum" placeholder="输入新的采购数量" style="width:200px;margin-right: 10px"
                    @blur="updateNum"></el-input>
        </el-tooltip>

        <el-tooltip class="item" content="地址" effect="dark" placement="top">
          <el-input v-model="address" placeholder="地址不能为空哦" style="width:200px;margin-right: 10px"></el-input>
        </el-tooltip>

        <el-tooltip class="item" content="选择客户" effect="dark" placement="top">
          <el-select v-model="clientId" placeholder="请选择" style="margin-right: 10px" @change="change">
            <el-option
                v-for="item in options"
                :key="item.clientId"
                :label="item.clientName"
                :value="item.clientId">
            </el-option>
          </el-select>
        </el-tooltip>

        <el-button plain type="primary" @click="addNew">商品添加</el-button>
        <el-button plain type="primary" @click="letOut">出库</el-button>
        <el-button plain type="danger" @click="removeTb">移除商品</el-button>
      </el-row>
    </div>

    <el-dialog
        :visible.sync="addNewInfo"
        title="添加出库商品"
        width="50%">
      <div style="display: flex;justify-content: center">
        <el-table
            :data="tableData2"
            highlight-current-row
            @current-change="handleCurrentChange2">
          <el-table-column
              label="商品编号"
              prop="productId"
              width="160">
          </el-table-column>
          <el-table-column
              label="客户名称"
              prop="productName"
              width="160">
          </el-table-column>
          <el-table-column
              label="厂家"
              prop="factory"
              width="160">
          </el-table-column>
          <el-table-column
              label="建议售价"
              prop="salePrice"
              width="160">
          </el-table-column>
        </el-table>
        <el-form>
          <el-form-item label="商品类别">
            <el-select v-model="value" placeholder="请选择" @change="selChange">
              <el-option
                  v-for="item in options2"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="商品名称">
            <el-input v-model="searchScope" style="width:200px;margin-right: 10px" @blur="showProductByPage"></el-input>
          </el-form-item>
        </el-form>

      </div>

      <el-row>
        <el-col :span="24">
          <div class="grid-content bg-purple-dark">
            <div class="block">
              <el-pagination
                  :current-page=currentPage
                  :page-size=pageSize
                  :total=totalSize
                  background
                  layout="prev, pager, next"
                  @current-change="currentPageFn">
              </el-pagination>
            </div>
          </div>
        </el-col>
      </el-row>
      <el-button plain type="primary" @click="addNewPro">点击添加</el-button>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "CheckOut",
  data() {
    return {
      currentRow: 0,//当前选中列
      totalSize: 0,//总行数
      pageSize: 0,//当前显示数据页
      currentPage: 0,//当前页码
      tableData: [],
      tableData2: [],
      showInfoById: false,
      searchName: '',
      searchScope: '',
      options: [],
      clientId: 1,//设置select框默认值
      upPurchaseNum: 0,//预备更新的入库数量
      address: '',
      addNewInfo: false
      , options2: [{
        value: '电脑产品',
        label: '电脑产品'
      }, {
        value: '安防产品',
        label: '安防产品'
      }, {
        value: '打印扫描设备',
        label: '打印扫描设备'
      }, {
        value: '办公耗材',
        label: '办公耗材'
      }],
      value: '电脑产品',
    }
  },
  mounted() {
    this.showPage()
    this.getClient()
  },
  methods: {
    getClient() {
      let url = "api/client/showAllClient"
      this.axios.get(url).then(
          r => {
            this.options = r.data
          }
      )
    },
    change() {
      this.showPage()
    },
    showPage() {
      let url = "api/checkCar/showCheckCarbyId/" + this.$store.state.user.userId + "/" + this.clientId
      this.axios.get(url).then(
          r => {
            this.tableData = r.data
          }
      )
    },
    messageShow(title, message) {
      this.$notify({
        title: title,
        message: (message)
      });
    },
    addNew() {
      this.addNewInfo = true
      this.showProductByPage()
    },
    currentPageFn(currentPage) {
      this.currentPage = currentPage
      this.showProductByPage()
    },
    selChange() {
      this.showProductByPage()
    },
    showProductByPage() {
      let sc = this.searchScope
      if (sc === '') {
        sc = 1
      }
      let url = "api/product/showProductByPage/" + this.currentPage + "/" + sc + "/" + this.value + "/-1/900000"
      this.axios.get(url).then(r => {
        this.tableData2 = r.data.records
        this.totalSize = r.data.total
        this.pageSize = r.data.size
      })
    },
    addNewPro() {
      //未选中
      if (this.currentRow == 0) {
        this.messageShow("未选择商品", "请先进行选择")
        return
      }
      console.log("c=" + this.currentRow)
      let productId = this.currentRow.productId
      console.log(productId)
      let url = "api/checkCar/addCheckToCar/" + this.$store.state.user.userId + "/" + productId + "/" + this.clientId
      this.axios.post(url).then(r => {
        this.messageShow("", r.data.info)
      })
      this.addNewInfo = false
      this.currentRow = 0
      this.showPage()
    },
    handleCurrentChange(val) {
      //必须不为null才能进行跳转分页
      if (val != null) {
        this.currentRow = val;
      }
    },
    handleCurrentChange2(val) {
      //必须不为null才能进行跳转分页
      if (val != null) {
        this.currentRow = val;
      }
    },
    //更新采购数量
    updateNum() {
      if (this.upPurchaseNum === "" || this.currentRow == 0) {
        this.messageShow("未确定对象", "请先选中你要进行更新的商品")
        return
      }

      console.log(this.currentRow)
      if (this.upPurchaseNum < 0 || this.upPurchaseNum > this.currentRow.productBean.productNum) {
        this.messageShow("更新数量失败", "请输入正确的采购数量")
        this.upPurchaseNum = 0
        return
      }
      let productId = this.currentRow.productBean.productId
      let url = "api/checkCar/updateCheckCarInfo/" + this.$store.state.user.userId + "/" + productId + "/" + this.upPurchaseNum
      this.axios.get(url).then(
          r => {
            this.messageShow("", r.data.info)
            this.currentRow = 0
            this.upPurchaseNum = 0
            this.showPage()
          })
    },
    letOut() {
      if (this.tableData.length === 0) {
        this.messageShow("无法添加空订单")
        return
      }
      if (this.address === "") {
        this.messageShow("", "地址不能为空")
        return
      }
      console.log(this.tableData)
      for (let i = 0; i < this.tableData.length; i++) {
        if (this.tableData[i].checkNum === 0) {
          this.messageShow("无法出库", "当前还有未填写数量的出库订单")
          return
        }
      }
      let url = "api/checkCar/checkOut/" + this.$store.state.user.userId + "/" + this.clientId + "/" + this.address
      this.axios.post(url).then(r => {
        this.messageShow("", r.data.info)
        this.showPage()
      })
      this.showPage()
      this.address = ""
    }
    , removeTb() {
      if (this.currentRow === 0) {
        this.messageShow("请先选中移除的对象")
        return
      }
      console.log(this.currentRow)
      let url = "api/checkCar/remove/" + this.currentRow.checkCarId
      this.axios.delete(url).then(r => {
        this.messageShow("", r.data.info)
        this.showPage()
      })
    }
  }
}
</script>

<style scoped>

</style>